<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <div id="app-2">
        <!-- 鼠标悬挂事件 -->
        <span v-bind:title="message">
          鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
        <!-- 使用for in 方法遍历数组 -->
        <ol>
            <li v-for="todo in todos">
              {{ todo.text }}
            </li>
          </ol>


          <span>{{fullName}}</span>
      </div>
</head>
<body>
    <script src="./js/vue.js"></script>
    <script>
     
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString(),

    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ],

    firstName: 'Foo',
    lastName: 'Bar'
  },
    computed: {
      fullName: function () {
      return this.firstName + ' ' + this.lastName
    }      
 }
})
    </script>
</body>
</html>